<template>
    <div class="app-container">
    竞赛详细信息
    <el-form label-width="120px">

        <el-form-item label="竞赛编号">
            <el-input v-model="com.id" readonly="readonly"/>
        </el-form-item>

        <el-form-item label="竞赛名称">
            <el-input v-model="com.cname" readonly="readonly"/>
        </el-form-item>

        <el-form-item label="年度">
            <el-input v-model="com.year" readonly="readonly"/>
        </el-form-item>

        <el-form-item label="竞赛内容">
            <el-input v-model="com.content" readonly="readonly"/>
        </el-form-item>

        <el-form-item label="竞赛日期">
            <el-input v-model="com.date" readonly="readonly"/>
        </el-form-item>

        <el-form-item label="竞赛规范">
            <el-input v-model="com.norm" readonly="readonly"/>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="addCom">报名参赛</el-button>
        </el-form-item>

        </el-form>


    </div>

    
</template>

<script>
import admin from '@/api/admin' 
import student from '@/api/student' 


export default {
    data() {
        return {
            com:{},
            title:'竞赛信息'
        }
    },
    created(){
        
        const routeParams=this.$route.params;
        if(routeParams && routeParams.id){
            //得到路由参数（id）的值
            const id=routeParams.id;
            this.getCom(id)
        }
        
    },
    methods:{
        getCom(id){
            admin.getCom(id).then(response=>{
                this.com= response.data;
            })
        },
        //学生报名参赛
        addCom(){
            student.addStuCom(this.com).then(response=>{
                //提示
                this.$message({
                    type:'success',
                    message:'报名成功'
                })
                
            }) 
        },
        
    }
}
</script>

<style>

</style>